<!--
 * @title: 侧边导航栏组件（带折叠按钮）
 * @params1: navList: 导航栏列表
 * @params2: height: 高度，默认600
 * @params3: top: 与顶部的距离，默认60
 * @method1: clickNav: 点击导航栏时执行方法，传递code参数
 * @description: navList中item的svg属性表示svg文件名称，默认读取`nav-${item.code}`文件
 * @fileName: foldNavBar.vue
 * @author: liuchenguang
 * @date: 2021-09-25
!-->
<template>
  <div :class="`customer-nav ${foldClassName}`" :style="{ height: height + 'px', top: top + 'px' }">
    <el-scrollbar class="customer-nav-container">
      <!-- <transition name="fold"> -->
      <div v-show="!isFold"><slot></slot></div>
      <!-- </transition> -->
      <div v-show="isFold" class="icon-list">
        <el-scrollbar class="customer-nav-container">
          <ul class="nav-list">
            <!--  <transition-group name="icon" tag="li"> -->
            <template v-for="(item, index) in navList">
              <li :key="index" :class="item.on ? `on ${foldClassName}` : ''" @click="clickNav(item.code)" style="cursor: pointer;clear: both">
                <!--  暂时取消小红点 -->
                <el-badge is-dot :value="item.count" :hidden="true || !(item.count > 0)" class="navFoldBadge">
                  <svg-icon :style="{ color: item.on ? 'white' : item.count > 0 ? '#777' : '#bdc1c6' }" class="navFoldIcon" :icon-class="item.svg ? item.svg : `nav-${item.code}`" />
                </el-badge>
              </li>
            </template>
            <!-- </transition-group> -->
          </ul>
        </el-scrollbar>
      </div>
    </el-scrollbar>
    <div :class="`customer-nav-fold ${foldClassName}`" @click="foldCustomerNav"><svg-icon class="foldIcon" :icon-class="isFold ? 'nav-unfold' : 'nav-fold'" /></div>
  </div>
</template>

<script>
/** VUE配置 */
export default {
  name: 'foldNavBar',
  data() {
    return {
      isFold: false,
      mainElement: []
    }
  },
  props: {
    // 高度
    height: {
      type: Number,
      default: 663
    },
    // 顶部距离
    top: {
      type: Number,
      default: 60
    },
    // 导航栏列表
    navList: {
      type: Array,
      default: () => []
    }
  },
  computed: {
    // 控制折叠后的类名
    foldClassName() {
      return this.isFold ? 'is-fold' : ''
    }
  },
  methods: {
    foldCustomerNav() {
      this.isFold = !this.isFold
      // 0展开,1折叠
      window.localStorage.setItem('navBarStatus', this.isFold ? 1 : 0)
      // 同步主页面折叠状态
      if (window.__POWER_BY_TAP_DYNAMIC) {
        let content = window.parent
        content.postMessage({ msg: 'foldNavBar_loaded', isFold: this.isFold }, '*')
      }
    },
    clickNav(code) {
      this.$emit('clickNav', code)
    },
    statusListener(message) {
      if (message.data.msg === 'foldNavBar_load') {
        // 查找子页面iframe
        let appCode = this.navList.find((v) => v.on).code
        let frameEl = [...document.getElementsByTagName('iframe')].find((item) => new RegExp(appCode).test(item.id))
        if (frameEl) {
          // 给子页面发送折叠状态
          let content = frameEl.contentWindow
          content.postMessage({ msg: 'foldNavBar_loaded', isFold: this.isFold }, '*')
        }
      } else if (message.data.msg === 'foldNavBar_loaded') {
        this.isFold = message.data.isFold
        // 若为主页面，则设置本地缓存
        if (top === self) {
          // 0展开,1折叠
          window.localStorage.setItem('navBarStatus', this.isFold ? 1 : 0)
        }
      }
    }
  },
  mounted() {
    // 同步iframe内抽屉页中侧边栏的折叠状态
    addEventListener('message', this.statusListener)
    this.$once('hook:beforeDestroy', () => {
      removeEventListener('message', this.statusListener)
    })

    if (window.__POWER_BY_TAP_DYNAMIC) {
      let content = window.parent
      content.postMessage({ msg: 'foldNavBar_load' }, '*')
    } else {
      this.isFold = top.localStorage.getItem('navBarStatus') === '1'
    }
  }
}
</script>
<style lang="scss" scoped>
.customer-nav {
  /* transition: flex 0.2s ease-out; */
  &.is-fold {
    flex: 0 1 60px;
  }
  .customer-nav-container {
    height: 100%;
    /deep/ .el-scrollbar__bar.is-vertical .el-scrollbar__thumb {
      display: none;
    }
    /deep/ .el-scrollbar__wrap {
      &::-webkit-scrollbar {
        background: transparent;
      }
      overflow-x: hidden;
      .nav-list {
        li {
          &.on {
            &.is-fold {
              background: var(--tap-main-color, '#0a6ed2');
              border-left: 4px solid transparent;
            }
          }
          .navFoldBadge {
            float: right;
            width: 25px;
            height: 100%;
            right: 16px;
          }
          .navFoldIcon {
            width: 100%;
            height: 100%;
          }
        }
      }
      .icon-list {
        position: absolute;
        top: 0;
        right: 0;
        z-index: 10;
        width: 100%;
        height: 100%;
        .nav-list li {
          padding-left: 0px;
        }
      }
    }
  }
  .customer-nav-fold {
    position: absolute;
    bottom: 20vh;
    opacity: 0.2;
    z-index: 2010;
    transform: translateX(200px);
    /* transition: transform 0.2s ease-out; */
    &.is-fold {
      transform: translateX(60px);
    }
    &:hover {
      opacity: 1;
      cursor: pointer;
    }
    .foldIcon {
      width: 20px;
      height: 70px;
      color: var(--tap-main-color, '#0a6ed2');
    }
  }
}
/deep/ .el-badge__content.is-fixed {
  top: 15%;
}
/* .fold-enter-active,
.fold-leave-active {
  transition: transform 0.2s ease-out;
}
.fold-enter,
.fold-leave-to {
  transform: translateX(-140px);
}
.icon-enter-active,
.icon-leave-active {
  transition: opacity 0.2s ease-out;
}
.icon-enter,
.icon-leave-to {
  opacity: 0;
} */
</style>
